<template>
  <ContentDetailWrap :title="t('warehouse.add')">
    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
    </template>
    <div class="w-full flex justify-between">
      <div class="w-85%">
        <Descriptions :schema="descriptionSchema" :data="form" />
      </div>
    </div>
  </ContentDetailWrap>
</template>

<script setup lang="tsx">
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { ElButton, ElLink, ElMessage, type FormInstance } from 'element-plus'
import { getEnumApi, getInfoApi, editDataApi } from '@/api/market/VideoManage'
import { Descriptions, type DescriptionsSchema } from '@/components/Descriptions'
import { useEnumeratePicker } from '@/utils'
import { ElImage } from 'element-plus'
import { useClipboard } from '@vueuse/core'
import { getListApi } from '@/api/productMerge'

const { copy } = useClipboard()
const { t } = useI18n()
const { push, go } = useRouter()
const { query } = useRoute()

const modelList = ref<Array<Record<string, any>>>([])
const categoryList = ref<Array<Record<string, any>>>([])
const productMergePmvOptions = ref<any[]>([])
const productMergeSmvOptions = ref<any[]>([])

interface FileItem {
  uid: number
  name: string
  url: string
  type: string
  id: string
}

const fileList = ref<FileItem[]>([])
const formRef = ref<FormInstance>()
const form = ref<Record<string, any>>({
  video_title: '',
  video_id: '',
  model_id: '',
  youtube_vid: '',
  coverimage_id: '',
  showstate: '',
  pm_names: '',
  sort: '',
  category: '',
  publish_time: '',
  blogger_name: '',
  init_shownumber: '',
  video_url: ''
})

const descriptionSchema = ref<DescriptionsSchema[]>([
  {
    field: 'video_title',
    label: t('video.video_title')
  },
  {
    field: 'shownumber',
    label: t('video.init_shownumber')
  },
  {
    field: 'showstate',
    label: t('video.showstate'),
    slots: {
      default: (data: Record<string, any>) => {
        return data.showstate == 1 ? <span>对外显示 </span> : <span>不对外显示</span>
      }
    }
  },
  {
    field: 'blogger_name',
    label: t('video.blogger_name')
  },
  {
    field: 'pm_names',
    label: t('video.pm_names')
  },
  {
    field: 'publish_time',
    label: t('video.publish_time')
  },
  {
    field: 'category',
    label: t('video.category'),
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(categoryList.value, data.category)}</span>
      }
    }
  },
  {
    field: 'youtube_vid',
    label: t('video.youtube_vid')
  },
  {
    field: 'sort',
    label: t('video.sort')
  },
  {
    field: 'coverimage_url',
    label: t('video.coverimage_id'),
    slots: {
      default: (data: any) => {
        return (
          <>
            {/* {data.coverimage_url ? ( */}
            <div>
              <ElImage
                class="w-100px h-100px"
                src={data.coverimage_url}
                previewTeleported={true}
                zoomRate={1.2}
                maxScale={7}
                minScale={0.2}
                fit="cover"
              />
            </div>
            {/* ) : (
              <div></div>
            )} */}
          </>
        )
      }
    }
  },
  {
    field: 'pmv_id',
    label: t('video.pmv_id'),
    slots: {
      default: (data: any) => {
        return (
          <div>
            {productMergePmvOptions.value.map((item: any) => (
              <div key={item.id} style="margin-bottom: 4px;">
                {item.productname}
              </div>
            ))}
          </div>
        )
      }
    }
  },
  {
    field: 'smv_id',
    label: t('video.smv_id'),
    slots: {
      default: (data: any) => {
        return (
          <div>
            {productMergeSmvOptions.value.map((item: any) => (
              <div key={item.id} style="margin-bottom: 4px;">
                {item.productname}
              </div>
            ))}
          </div>
        )
      }
    }
  },
  {
    field: 'video_url',
    label: t('video.video_id'),
    slots: {
      default: (data: any) => {
        return (
          <>
            <ElLink type="primary" href={data.video_url} target="_blank">
              跳转
            </ElLink>
            <ElButton
              link
              class="m-l-4"
              type="primary"
              onClick={() => (copy(data.video_url) as any) && ElMessage.success('复制成功')}
            >
              复制
            </ElButton>
          </>
        )
      }
    }
  }
])

//获取枚举
const getDropDownBoxInfo = async () => {
  const resp = await getEnumApi({ field: 'all' })
  modelList.value = resp.data.model
  categoryList.value = resp.data.category
}

//获取回显数据
const getBackShow = async () => {
  const resp = await getInfoApi(query.id as string)
  form.value.video_title = resp.data.video_title
  form.value.video_id = resp.data.video_id
  form.value.video_url = resp.data.video_url
  form.value.model_id = resp.data.model_id
  form.value.youtube_vid = resp.data.youtube_vid
  form.value.coverimage_id = resp.data.coverimage_id
  form.value.coverimage_url = resp.data.coverimage_url
  form.value.showstate = resp.data.showstate
  form.value.pm_names = resp.data.pm_names
    ? resp.data.pm_names.map((item: any) => item.productname).join('\n')
    : ''
  form.value.blogger_name = resp.data.blogger_name
  form.value.publish_time = resp.data.publish_time
  form.value.sort = resp.data.sort
  form.value.category = resp.data.category
  form.value.init_shownumber = resp.data.init_shownumber
  form.value.id = resp.data.id
  fileList.value = resp.data.file
  form.value.pmv_id = resp.data.pmv_id
  form.value.smv_id = resp.data.smv_id
}

const getProductMergeList = async () => {
  const resp = await getListApi({ pageIndex: 1, pageSize: 10000 })
  if (!resp?.data?.list) {
    console.error('未能获取聚合商品列表或列表为空。')
    return
  }
  const allProducts = resp.data.list

  // 根据ID过滤出对应的商品信息
  productMergePmvOptions.value = allProducts.filter((p) => form.value.pmv_id?.includes(p.id))
  productMergeSmvOptions.value = allProducts.filter((p) => form.value.smv_id?.includes(p.id))
}

onMounted(async () => {
  // 先获取视频详情数据
  await getBackShow()
  // 再根据视频数据中的ID获取对应的商品信息
  await getProductMergeList()
  // 最后获取其他枚举信息
  getDropDownBoxInfo()
})
</script>
<style lang="less" scoped>
.media-container {
  display: flex;
  justify-content: space-between; /* 居中对齐内容之间的间隔 */
  flex-wrap: wrap; /* 允许内容换行以适应小屏幕 */
  gap: 20px; /* 控制图片和视频之间的间距 */
}

.media-item {
  flex: 0 1 calc(50% - 20px); /* 在容器中占据 50% 的空间，减去 gap */
  max-height: 400px;
  object-fit: cover; /* 保持图像比例 */
  margin-top: 20px;
}

.media-item img,
.media-item video {
  width: 100%;
  height: auto; /* 高度自适应，保持比例 */
}

.file-list-container {
  margin-top: 20px;
}

.el-upload-list {
  padding: 0;
  margin: 0;

  /* Optional adjustments for your layout */
  list-style: none;
}

.el-upload-list__item {
  display: flex;
  padding: 4px 8px;
  background-color: #fff;
  border-bottom: 1px solid #ebeef5;
  align-items: center;
  justify-content: space-between;
}

.el-upload-list__item-name {
  flex-grow: 1;
  color: #606266;
  text-decoration: none;
}

.el-upload-list__item-name:hover {
  color: #409eff;
}

.el-icon-view,
.el-icon-delete {
  margin-left: 10px;
  color: #606266;
  cursor: pointer;
}

.el-icon-view:hover {
  color: #409eff;
}

.el-icon-delete:hover {
  color: #f56c6c;
}
</style>
